body {
    padding-left: 2em;
    padding-top: 0.25em;
    padding-right: 2em;
    font-size: 100%;
    font-family: Arial, sans;
}
#io {  
    padding-top: 1.8em;
    width: 100%;
    height: 95%;
}
#io .section {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}
#io .section textarea {
    width: 100%;
    height: 4em;    
}
#io .section .output{
    margin-left: 1em;
    margin-top: 1em;
    max-width: 95%;
    overflow: auto;
}
#io .section button {
    width: 1.5em;
    position: absolute;
    right: 2em;    
    padding: 0;
}

pre { margin: 0; }

.in {
    color: purple;
}
.out {
    color: blue;
}
.comment {
    color: black;
}
.previousInput {
    opacity: 0.85;    
}
#menu {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(225,225,225,0.95);
    width: 100%;
    font-size: 150%;
    z-index: 5;
    padding: 4px;
}
#menu button {
    vertical-align:top;
}
#title {
    opacity: 0.25;
    letter-spacing: -5px;    
    cursor: pointer;
    float: right;
    padding-right: 0.4em;
}
#title:hover {
    opacity: 1.0;
    letter-spacing: -5px;    
    
}
#menubuttons {
    float: left;    
}
#menubuttons button {
    margin: 0;
    font-size: 100%;
    color: #777;
}


.active {
    color: #000 !important;
}
#volume {
    background-color: white;
    float: left;
    clear:none;
    height: 2em;
    margin-top: 0.5em;
}